<template>
	<view>
		<!-- 状态栏占位符h5 -->
		<view class="status_bar"></view>
		<!-- #ifdef MP -->
		<view class="pl-20r pr-20r" :style="{'height':navibarHeight+'px'}">
			<view class="flex items-center" :style="{'width':navibarWidth+'px'}" style="height: 100%;">
				<text @click="backClick" class="flex-1 iconfont icon-zuojiantou"></text>
				<view @click="goHomePage" class="flex-8 flex items-center">
					<image class="w-70r h-70r rounded-35r" :src="publisher.avatar" mode="aspectFill"></image>
					<text class="ml-10r text-30r">{{publisher.nickname}}</text>
				</view>

			</view>
		</view>
		<!-- #endif -->

		<!-- #ifndef MP -->
		<view class="fixed z-16 pl-20r pr-20r h-100r third-bg-color" style="width: 100%;">
			<view class="flex items-center" style="height: 100%">
				<text @click="backClick" class="flex-1 iconfont icon-zuojiantou"></text>
				<view @click="goHomePage" class="flex-14 flex items-center">
					<image class="w-70r h-70r rounded-35r" :src="publisher.avatar" mode="aspectFill"></image>
					<text class="ml-10r text-30r">{{publisher.nickname}}</text>
				</view>

			</view>

		</view>
		<view class="h-100r" style="width: 100%;"></view>
		<!-- #endif -->

		<view @click="previewImage" class="flex flex-center items-center third-bg-color" style="width: 100%;">
			<image class="w-700r h-700r rounded-20r" style="background-color: #fff;" :src="workImage" mode="aspectFill">
			</image>
		</view>



		<!-- 作品信息内容 -->
		<view class="mt-20r pl-20r pr-20r pb-10r">
			<view class="mb-20r flex flex-center">
				<text class="main-color font-bold">{{this.workDetail.name?"《"+workDetail.name+"》":"加载中"}}</text>
			</view>
			<view class="text-main">
				<text>作者: {{publisher.nickname}}</text>
			</view>

			<text class="text-main">设计模板: {{template.name}}</text>
			<view class="text-light mt-10r flex text-20r">
				<text class="mr-20r">发布于{{workDetail._add_time_str}}</text>
				<text>武汉</text>
			</view>
		</view>
		<!-- 作品内容 -->

		<!-- 		<view class="flex flex-center items-center third-bg-color">
			<image class="w-700r h-700r rounded-20r" :src="templateImage" mode="aspectFill"></image>
		</view> -->




		<!-- 点赞 收藏 评论 -->
		<view class="fixed pt-10r bottom-0 z-16 h-90r third-bg-color box-shadow"
			style="width: 100%;margin-top: 100rpx;">
			<view class="flex justify-around">
				<view class="flex flex-col flex-center">
					<text class="text-50r iconfont icon-dianzan"></text>
					<text class="text-20r">0</text>
				</view>
				<view class="flex flex-col flex-center">
					<text class="text-50r iconfont icon-shoucang"></text>
					<text class="text-20r">0</text>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import consoleLog from '../../uni_modules/vk-unicloud/vk_modules/vk-unicloud-page/libs/install/console.log';
	export default {
		data() {
			return {
				id: "",
				navibarHeight: 0,
				menuButtonWidth: 0,
				navibarWidth: 0,
				hasWork: true,
				comment_count: 0,
				value: "",
				styles: {
					color: '#FF5632',
					borderColor: '#E5E5E5'
				},
				workDetail: {},
				publisher: {},
				template: {},
				workImage: "",
				templateImage: "",
				isFocus: false,
				comments: [],
				realComment: '专家评论为贯彻落实党的十九大关于深化机构改革的决策部署，2018年3月中共中央印发《深化党和国家机构改革方案》，成立中央网络安全和信息化委员会，负责国家网信领域重大工作的顶层设计、总体布局，成立中央网络安全和信息化委员会，负责国家网信领域重大工作的顶层设计、总体布局，成立中央网络安全和信息化委员会，负责国家网信领域重大工作的顶层设计、总体布局',
				expanded: true,

			};
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {
			comment() {
				if (!this.expanded) {

					return this.realComment.substr(0, 100); //字符串截取100个字
				} else {
					return this.realComment;
				}
			},
			avatar() {
				if (vk.getVuex('$user.userInfo._id')) {
					return vk.getVuex('$user.userInfo.avatar') || '../../static/images/默认头像.png';
				} else {
					return '../../static/images/默认头像.png';
				}
			},
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			this.id = options.id;
			options.id = "641133b5e766bb2975c94b22";


			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {

		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {

		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {

		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				// #ifdef MP
				uni.getSystemInfo({
					success: (r) => {
						let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
						let statusBarHeight = r.statusBarHeight;
						this.navibarHeight = menuButtonInfo.height + (menuButtonInfo.top -
							statusBarHeight) * 2;
						this.menuButtonWidth = menuButtonInfo.width + (r.screenWidth - menuButtonInfo.right) *
							2;
						this.navibarWidth = r.screenWidth - this.menuButtonWidth;
						console.log(this.navibarHeight);
					}
				})
				// #endif
				vk.callFunction({
					url: 'client/clothes/kh/getWorkdetails',
					title: '加载中...',
					data: {
						work_id: options.id
					}
				}).then((r) => {
					this.workDetail = r.data;
					this.publisher = r.data.publisher;
					this.workImage = this.workDetail.cloth_imgs[0];
					this.template = r.data.template;
					this.templateImage = this.template.cloth_imgs[0];
					// this.comments = r.data.comments;
					// this.comment_count = this.comments.length;
					console.log('publisher' + this.publisher);
				});

			},
			goHomePage(){
				vk.navigateTo({
					url: '/pages/homepage/homepage?id=' + this.publisher._id
				})
			},
			previewImage() {
				uni.previewImage({
					urls:this.workDetail.cloth_imgs
				});
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			giveComment() {
				this.isFocus = true;
			},
			// refreshComments(){
			// 	vk.callFunction({
			// 		url:'client/comment/kh/getCommentsByDynamic',
			// 		title: '加载中...',
			// 		data: {
			// 			dynamic_id:this.dynamic._id
			// 		}
			// 	}).then((r) => {

			// 		this.comments = r.data;
			// 		this.comment_count = this.comments.length;
			// 	});
			// 	console.log(this.comments);
			// },
			backClick() {
				uni.navigateBack();
			},
			sendComment() {
				vk.callFunction({
					url: 'client/comment/kh/publishComment',
					title: '发布中...',
					data: {
						content: this.value,
						dynamic_id: this.dynamic._id
					}
				}).then((r) => {
					this.refreshComments();
					this.value = '';
				});
			}
		},

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F1F1F1;
		;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
